<template>
  <div :class="props.isFixed ? 'page-tools-fixed' : 'page-tools'">
    <div class="closed" v-if="visible">
      <div class="left">
        <span
          class="icon left-arrow"
          @click="changeStudent('prev')"
          :class="{ disabled: props.total <= 1 }"
        ></span>
        <span class="icon name">{{ props.content?.student_name || '' }}</span>
        <span
          class="icon right-arrow"
          @click="changeStudent('next')"
          :class="{ disabled: props.total <= 1 }"
        ></span>
      </div>
      <div class="right">
        <span class="icon page-closed" @click="visible = !visible"></span>
      </div>
    </div>
    <div class="opened" v-else>
      <span class="icon page-opened" @click="changeVisible"></span>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const visible = ref(false)

const props = defineProps({
  content: {
    type: Object
  },
  isFixed: {
    type: Boolean,
    default: false
  },
  total: {
    default: 1,
    type: Number
  },
  index: {
    default: 0,
    type: Number
  }
})

const emits = defineEmits(['change-student', 'current-index'])
const changeStudent = desc => {
  if (props.total <= 1) return
  emits('change-student', desc)
}

const changeVisible = () => {
  visible.value = !visible.value
  emits('current-index', props.index)
}
</script>
<style lang="less" scoped>
.page-tools-fixed {
  z-index: 999;
  position: fixed;
  bottom: 116px;
  right: 0;
  background: rgba(4, 11, 26, 0.75);
  border-radius: 12px;
  display: flex;
  width: fit-content;
}
</style>
<style lang="less" scoped>
.icon {
  color: #fff;
  width: 24px;
  height: 24px;
  display: inline-block;
  cursor: pointer;

  &:active {
    opacity: 0.4;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }
}

.opened {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.closed {
  width: 232px;
  height: 56px;
  display: flex;
  align-items: center;

  .left {
    flex: 1;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;

    .name {
      flex: 1;
      text-align: center;
    }
  }

  .right {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.page-opened {
  background: url('@/assets/images/comment/page-opened.png') no-repeat
    center/cover;
}

.left-arrow {
  background: url('@/assets/images/comment/img-left.png') no-repeat center/cover;
}

.right-arrow {
  background: url('@/assets/images/comment/img-right.png') no-repeat
    center/cover;
}

.page-closed {
  background: url('@/assets/images/comment/page-closed.png') no-repeat
    center/cover;
}
</style>
<style lang="less" scoped>
.page-tools {
  z-index: 999;
  bottom: 116px;
  right: 0;
  background: rgba(4, 11, 26, 0.75);
  border-radius: 12px;
  display: flex;
  width: fit-content;
}
</style>
